/**
 * 示例
 */
import React, { Component } from 'react'
import Navbar from '@components/navbar'
import {httpGetMyData913} from '@api/common'
import { Card,Toast,Button,WhiteSpace } from 'antd-mobile'


export default  class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 加载.
      loading:false,
      // 加载更多
      loadingMore:false,
      // 列表数据
      listData:[],
    }
    // 请求参数
    this.requestParams = {
      pagesize:10,
      pageindex:1,
      projectname:'', // 项目名称
      kfs:'', // 开发企业
      projectaddr:'', // 项目地址
      presalecert:'', // 预售许可证号
    }
  }

  componentDidMount(){
    this.getListData()
  }

  getListData=()=>{
    const reqData = {
      ...this.requestParams,
    }
    if(this.requestParams.pageindex === 1){
      Toast.loading('正在加载数据...',0)
    }else{
      this.setState({loadingMore:true})
    }

    httpGetMyData913(reqData,res=>{
      let {listData} = this.state
      if(this.requestParams.pageindex === 1){
        Toast.hide()
        listData = res
      }else{
        listData.push(...res)
      }
      this.setState({
        listData,
        loadingMore:false,
      })
    })
  }

  /**
   * 加载更多
   */
  onClickLoadMore=()=>{
    this.requestParams.pageindex +=1
    this.getListData()
  }

  /**
   * 点击楼盘，查看楼盘详情
   */
  onClickLP=(item)=>{
    this.props.history.push({
      pathname:`/app/lpdetail/${item.PARENTPROJID}`,
      query:{
        ...item,
      },
    })
  }

  render() {
    const {listData,loadingMore} = this.state
    return (
      <div className="app-wrap">
        <Navbar title="预售许可证" left="back"/>
        <div className="app-content">
          {
            listData.map((item,index)=>{
              const result = (
                <Card key={index}>
                  <Card.Header
                    title={<div onClick={()=>this.onClickLP(item)}>{`${index+1}：${item.F_PROJECT_NAME}`}</div>}
                    extra={<span>所属区县：{item.F_SITE}</span>}
                  />
                  <Card.Body>
                    <div className="card-body-item"><span>座落：</span><span>{item.F_ADDR}</span></div>
                    <div className="card-body-item"><span>企业名称：</span><span>{item.F_ADDR}</span></div>
                    <div className="card-body-item"><span>预售许可证号：</span><span>{item.F_PRESALE_CERT}</span></div>
                    <div className="card-body-item"><span>可售楼栋：</span><span>{item.F_BLOCK}</span></div>
                    <div className="card-body-item"><span>注册日期：</span><span>{item.F_REGISTER_DATE}</span></div>
                    <div className="card-body-item"><span>建筑ID：</span><span>{item.BUILDINGID}</span></div>
                  </Card.Body>
                  <Card.Footer content="类别" extra={<div>{item.F_LB}</div>} />
                </Card>
              )
              return result
            })
          }
          <WhiteSpace />
          <Button loading={loadingMore} onClick={this.onClickLoadMore}>加载更多</Button>
          <WhiteSpace />
        </div>
      </div>
    )
  }
}
